<template>
  <div class="space-y-8">
    <h2 class="text-2xl font-bold">账号安全</h2>

    <!-- 修改密码部分 -->
    <div class="bg-white p-6 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold mb-6">修改密码</h3>
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input
            v-model="passwordForm.currentPassword"
            type="password"
            placeholder="请输入你的旧密码，初次设置密码无需填写旧密码"
            show-password
            class="w-full max-w-md"
          />
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword" required>
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            placeholder="请输入"
            show-password
            class="w-full max-w-md"
          />
        </el-form-item>

        <el-form-item label="重复密码" prop="confirmPassword" required>
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            placeholder="请输入"
            show-password
            class="w-full max-w-md"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="changePassword" :loading="passwordLoading">
            修改密码
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 忘记密码部分 -->
    <div class="bg-white p-6 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold mb-4">忘记密码?</h3>
      <el-button plain @click="resetPassword">重置密码</el-button>
    </div>

    <!-- 注销账号部分 -->
    <div class="bg-white p-6 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold mb-4 text-red-600">注销账号</h3>
      <p class="text-gray-600 mb-4">
        注销后，您的账号将被永久删除，所有数据都将无法恢复，请谨慎操作
      </p>
      <el-button type="danger" plain @click="showDeleteDialog = true">
        注销账号
      </el-button>
    </div>

    <!-- 注销账号确认对话框 -->
    <el-dialog
      v-model="showDeleteDialog"
      title="确认注销账号"
      width="400px"
      :before-close="handleDeleteDialogClose"
    >
      <div class="text-center">
        <el-icon :size="48" color="#F56C6C" class="mb-4">
          <WarningFilled />
        </el-icon>
        <p class="text-gray-700 mb-4">
          您确定要注销账号吗？此操作不可撤销，所有数据将被永久删除。
        </p>
        <p class="text-sm text-gray-500 mb-6">
          请输入 "确认注销" 来确认此操作：
        </p>
        <el-input
          v-model="deleteConfirmText"
          placeholder="请输入：确认注销"
          class="mb-4"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDeleteDialog = false">取消</el-button>
          <el-button
            type="danger"
            @click="deleteAccount"
            :disabled="deleteConfirmText !== '确认注销'"
            :loading="deleteLoading"
          >
            确认注销
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { WarningFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 密码表单相关
const passwordFormRef = ref<FormInstance>()
const passwordLoading = ref(false)
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 注销账号相关
const showDeleteDialog = ref(false)
const deleteConfirmText = ref('')
const deleteLoading = ref(false)

// 密码验证规则
const passwordRules: FormRules = {
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 方法
const changePassword = async () => {
  if (!passwordFormRef.value) return

  try {
    await passwordFormRef.value.validate()
    passwordLoading.value = true

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    ElMessage.success('密码修改成功！')

    // 重置表单
    passwordForm.currentPassword = ''
    passwordForm.newPassword = ''
    passwordForm.confirmPassword = ''

  } catch (error) {
    console.error('密码修改失败:', error)
  } finally {
    passwordLoading.value = false
  }
}

const resetPassword = () => {
  ElMessageBox.confirm(
    '重置密码链接将发送到您的邮箱，请注意查收',
    '重置密码',
    {
      confirmButtonText: '发送',
      cancelButtonText: '取消',
      type: 'info',
    }
  ).then(() => {
    ElMessage.success('重置密码邮件已发送！')
  }).catch(() => {
    ElMessage.info('已取消重置密码')
  })
}

const handleDeleteDialogClose = () => {
  deleteConfirmText.value = ''
  showDeleteDialog.value = false
}

const deleteAccount = async () => {
  if (deleteConfirmText.value !== '确认注销') {
    ElMessage.error('请正确输入确认文字')
    return
  }

  deleteLoading.value = true

  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000))

    ElMessage.success('账号注销成功')
    showDeleteDialog.value = false

    // 这里可以跳转到登录页面或首页

  } catch (error) {
    ElMessage.error('注销失败，请稍后重试')
  } finally {
    deleteLoading.value = false
  }
}
</script>

<style scoped>
.space-y-8 > * + * {
  margin-top: 2rem;
}
</style>
